<template>
  <div class="console">
    <AboutProject :key="topKey" :top-data="topData" />

    <CardList :key="topKey" :top-data="topData"></CardList>

    <el-row :gutter="20">
      <el-col :sm="24" :md="12" :lg="12">
        <ActiveUser v-loading="homeLoading" :inviter-numData="inviterNumData" :key="inviterNumKey" />
      </el-col>
      <el-col :sm="24" :md="12" :lg="12">
        <SalesOverview v-loading="homeLoading" :promotion-numData="promotionNumData" :key="promotionKey" />
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :sm="24" :md="24" :lg="8">
        <NewUser :inviter-list="inviterList" :key="inviterKey" />
      </el-col>
      <el-col :sm="24" :md="12" :lg="10">
        <Dynamic :order-list="orderList" :key="orderKey" />
      </el-col>
      <el-col :sm="24" :md="12" :lg="6">
        <TodoList :level-list="levelList" :key="levelKey" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import CardList from './widget/CardList.vue'
import ActiveUser from './widget/ActiveUser.vue'
import SalesOverview from './widget/SalesOverview.vue'
import NewUser from './widget/NewUser.vue'
import Dynamic from './widget/Dynamic.vue'
import TodoList from './widget/TodoList.vue'
import AboutProject from './widget/AboutProject.vue'
import { useCommon } from '@/composables/useCommon'
import { homePageInfo, homeStatData } from '@/api/agent'

const topKey = ref(0)
const inviterKey = ref(0)
const orderKey = ref(0)
const levelKey = ref(0)

const topData = ref({})
const inviterList = ref([])
const orderList = ref([])
const levelList = ref({})
const getHomePageData = async () => {
  const res = await homePageInfo()
  if (res.code === '0') {
    topData.value = res.data
    inviterList.value = res.data.brokerageUserAoList
    orderList.value = res.data.promoterOrderAoList
    levelList.value = res.data.levelDetailsAo
    topKey.value = new Date().getTime()
    inviterKey.value = new Date().getTime()
    orderKey.value = new Date().getTime()
    levelKey.value = new Date().getTime()
  }
}

const inviterNumData = ref([])
const promotionNumData = ref([])
const promotionKey = ref(0)
const inviterNumKey = ref(0)
const homeLoading = ref(false)
const getStatList = async () => {
  try {
    homeLoading.value = true
    const res = await homeStatData()
    if (res.code === '0') {
      const type1 = res.data.find((item: any) => item.type === '01')
      const type2 = res.data.find((item: any) => item.type === '02')
      inviterNumData.value = type1 ? type1 : {}
      promotionNumData.value = type2 ? type2 : {}
      inviterNumKey.value = new Date().getTime()
      promotionKey.value = new Date().getTime()
    }
  } catch {
  } finally {
    homeLoading.value = false
  }
}

defineOptions({ name: 'Console' })

useCommon().scrollToTop()

onMounted(() => {
  getHomePageData()
  getStatList()
})
</script>

<style lang="scss" scoped>
@use './style';
</style>
